<script setup lang="ts">

import { onMounted, reactive,ref } from 'vue'
import * as echarts from 'echarts'
import { forEach } from 'lodash';

const props = defineProps<{
  chartData: any
}>()

const xData = ref([]);
const yData = ref([]);

const createChart = () => {
  const myChart = echarts.init(document.getElementById(props.chartData.name))
  const option = {
  xAxis: {
    data: xData.value,
    splitLine:{
        show:false,
    },
    axisLabel:{
        margin: 2,
        interval: 0,
        rotate: -45,
        textStyle:{
            color: '#FEFEFF',
        }
    }
  },
  yAxis: {
    type: 'value',
    splitLine:{
        show:true,
        lineStyle:{
            color: '#FEFEFF',
            type: [5, 10],
        },
    },
    axisLabel:{
        textStyle:{
            color: '#FEFEFF',
        }
    }
  },
  series: [
    {
      data: yData.value,
      type: 'line',
      smooth: true,
      lineStyle: {
        normal: {
          color: '#5df5f3',
        }
      },
      itemStyle: {
        normal: {
          color: '#5df5f3',
        }
      }
    }
  ]
};

  // 绘制图表
  myChart.setOption(option)

}

onMounted(() => {
    props.chartData.data.forEach(item => {
        xData.value.push(item.name);
        yData.value.push(item.value);
    });
  setTimeout(() => {
    createChart()
  }, 500)
})

</script>

<template>
    <div class="echart-box">
      <div class="chart" :id="chartData.name"></div>
    </div>
  </template>
  
  <style lang="scss" scoped>
  .echart-box {
    position: relative;
    width: 100%;
    height: calc(300px - 45px);
    .chart {
      width: 100%;
      height: 100%;
    }
    .test-btn {
      position: absolute;
      bottom: 0;
      right: 0;
    }
  }
  </style>
